<template>
  <div class="store-container">
    <h1 class="font-size">Store组管理</h1>
   <div class="item job">当前职业: <span class="label">{{appStore.roleStore.basicT.basic.profession}}</span></div>
   <div class="item job">名字: <span class="label">{{appStore.roleStore.basicT.basic.name}}</span></div>
   <div class="item job">性别: <span class="label">{{appStore.roleStore.basicT.basic.sex}}</span></div>
   <div class="item job">装备: <span class="label">{{appStore.roleStore.equipmentT.equipment}}</span></div>
   <div class="item job">技能: <span class="label">{{appStore.roleStore.skillT.skill}}</span></div>
   <!-- <div>专职</div> -->
   <div class="item btns">
     <van-button type="primary" size="small" plain @click="warroirClick">战士</van-button>
     <van-button type="primary" size="small" plain @click="mageClick">法师</van-button>
     <van-button type="primary" size="small" plain @click="warlockClick">道士</van-button>
   </div>
  </div>
</template>

<script setup lang="ts">
import appStore from '@/store';
console.log(appStore,'--------appStore--------');
 
const warroirClick = () => {
  appStore.roleStore.changeProfession('warrior')
} 

const mageClick = () => {
  appStore.roleStore.changeProfession('mage')
}

const warlockClick = () => {
  appStore.roleStore.changeProfession('warlock')
}


</script>

<style lang="scss" scoped>
.store-container {
  height: 100vh;
  @include flexbox(flex-start, center, column);
  .item {
    margin: 15px 0;
    .label {
      color: #ff976a;
    }
	}
  .van-button {
    margin-right: 10px;
  }
  .font-size {
    font-weight: 500;
    color: #ff976a;
    margin: 20px 0;
  }
}
</style>
